<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/plugs/bootstrap-treeview/bootstrap-treeview.css">

    <link rel="stylesheet" href="/pages/css/tree-menu-layout.css">

    <style type="text/css">

        .api-style-change{
            position: absolute;
            right: 5px;
            cursor: pointer;
        }
        .api-style-change:hover{
            color: #63696f;
        }
        .api .api-list.full{
            width: unset;
            padding-left:1rem;
            padding-right: 1rem;
        }

        .api .api-list .api-search-form{
            padding-right: 17px;
        }

        .form-inline .btn{
            margin-left: 5px;
        }

        .fileinput-button {
            position: relative;
            display: inline-block;
            overflow: hidden;

            border-top-right-radius: unset;
            border-bottom-right-radius: unset;
        }

        .fileinput-import{
            border-top-left-radius: unset;
            border-bottom-left-radius: unset;
        }

        .fileinput-button input{
            position: absolute;
            left: 0px;
            top: 0px;
            opacity: 0;
            -ms-filter: 'alpha(opacity=0)';
        }
        .form-inline .fileinput-import,
        .form-inline .fileinput-name{
            margin-left: 0px !important;
        }
        .form-inline .fileinput-name{
            margin-right: 0px !important;
            max-width: 300px;
            display: none;
            overflow: hidden;
            white-space: nowrap; /* 防止文字换行 */
            text-overflow: ellipsis; /* 超出部分显示省略号 */
        }

        form code.form-control{
            height: unset !important;
        }
    </style>
</head>
<script type="text/javascript" src="/plugs/bootstrap-treeview/bootstrap-treeview.js"></script>


<script type="text/javascript">
    $(function () {
        //风格切换
        $("body").on("click",".api-style-change",function (event) {
            $(this).find(".tree").toggleClass("icon-caidan2").toggleClass("icon-biaoge");
            $(".api .api-tree").toggle();
            $(".api .api-list").toggleClass("full");
        })
    })
</script>


<body>

<div class="api-style-change">
    <span class="tree iconfont icon-caidan2"></span>
</div>


 <div  class="api">
     <!--树形api -->
     <div class="api-tree tree-menu-left">
         <div class="api-menu"></div>
         <input type="hidden" id="apiMenuSelectedId">
     </div>

     <!--表格 -->
     <div class="api-list content-right">
         <div  class="api-search-form">
             <form id="apiSearch" class="form-inline">
                 <label class="sr-only" for="namespace">命名空间</label>
                 <input type="text" class="form-control mb-2 mr-sm-2" id="namespace" name="namespace" placeholder="命名空间">

                 <label class="sr-only" for="shortId">编号</label>
                 <input type="text" class="form-control mb-2 mr-sm-2" id="shortId" name="shortId" placeholder="编号">

                 <label class="sr-only" for="shortId">表</label>
                 <input type="text" class="form-control mb-2 mr-sm-2" id="tableName" name="tableName" placeholder="表名">


                 <label class="sr-only" for="commandType">类型</label>
                 <input type="text" class="form-control mb-2 mr-sm-2" id="commandType" name="commandType" placeholder="类型">


                 <label class="sr-only" for="returnType">结果</label>
                 <input type="text" class="form-control mb-2 mr-sm-2" id="returnType" name="returnType" placeholder="结果">

                 <button type="button" class="btn btn-primary mb-2 search" style="background-color: #409eff">查询</button>

                 <button type="button" class="btn btn-success mb-2 add" style="background-color: #67c23a" >新增</button>

                 <button type="button" class="btn btn-primary mb-2 prompt-popover export" data-container="body" data-placement="top"  data-trigger="hover" data-toggle="popover" data-content="搜索项或表格选中项过滤">导出</button>

                 <button type="button" class="btn btn-success mb-2 fileinput-button">
                      <span>上传</span>
                      <input  type="file" id="importFile" name="file" >
                 </button>
                 <span class="form-control mb-2 mr-sm-2 fileinput-name" id="fileName"></span>
                 <button type="button" class="btn btn-success mb-2 fileinput-import">导入</button>

                 <button type="button" class="btn btn-primary mb-2 prompt-popover print" data-container="body" data-placement="top"  data-trigger="hover" data-toggle="popover" data-content="搜索项或表格选中项过滤">预览打印</button>

             </form>
         </div>
         <div class="table-responsive-md">
             <table id="apiTable" class="table-sm"></table>
         </div>
     </div>
 </div>

<script type="text/javascript" src="/pages/dms/sqlStatementListTree.js"></script>
<script type="text/javascript" src="/pages/dms/sqlStatementList.js"></script>
</body>
</html>